import React, { useEffect, useState } from 'react';
import Board from 'react-trello';
import { Layout, Menu, Input, Typography, Row, Col, Modal, Form, Button, Select, message } from 'antd';
import {
    AppstoreOutlined,
    SettingOutlined,
    SearchOutlined,
    OrderedListOutlined,
    TaobaoSquareFilled
} from '@ant-design/icons';
import '../styles/trello.css';
import PublishTaskModal from "../component/PublishTaskModal";
import { hello } from "../api/dataApi";
import { logout } from "../api/loginApi";
import demoData from "../../data/demo.json";
import MyProfile from "./MyProfile"; // 直接导入 JSON 数据

const { Header, Content, Sider } = Layout;

const data = {
    lanes: demoData, // 使用导入的数据
};

const MainPage = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isProfileModalVisible, setIsProfileModalVisible] = useState(false);


    const showModal = () => {
        setIsModalVisible(true);
    };

    const showProfileModal = () => {
        setIsProfileModalVisible(true);
    };

    useEffect(() => {
        getData()
    }, []);

    const getData = () => {
        hello()
    }



    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible className="custom-sider" style={{ backgroundColor: '#ffffff' }}>
                <div className="logo" />
                <div style={{ marginTop: '20px' }}>
                    <Menu theme="dark" mode="inline" style={{ background: 'white', color: 'black' }}>
                        <Menu.Item key="1" icon={<AppstoreOutlined />} style={{ color: 'black' }} onClick={showModal}>
                            Publish Task
                        </Menu.Item>
                        <Menu.Item key="2" icon={<TaobaoSquareFilled />} style={{ color: 'black' }}>
                            Task Activity
                        </Menu.Item>
                        <Menu.Item key="3" icon={<OrderedListOutlined />} style={{ color: 'black' }}>
                            Order Center
                        </Menu.Item>
                        <Menu.Item key="4" icon={<SettingOutlined />} style={{ color: 'black' }}>
                            Roadmap
                        </Menu.Item>
                        <Menu.Item key="5" icon={<SettingOutlined />} style={{ color: 'black' }} onClick={showProfileModal}>
                            My Profile
                        </Menu.Item>
                    </Menu>
                </div>
            </Sider>
            <Layout className="site-layout">
                <Header style={{ padding: '0 16px', background: '#fff', display: 'flex', alignItems: 'center' }}>
                    <div style={{ marginLeft: "30px", width: "100%" }}>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                            <div>
                                <Input
                                    placeholder="Search"
                                    prefix={<SearchOutlined />}
                                    style={{ width: 300, marginLeft: 'auto' }}
                                />
                            </div>
                            <div style={{ float: "right" }}>
                                <Button onClick={() => {
                                    logout().then(res => {
                                        getData()
                                    })
                                }}>logout</Button>
                            </div>
                        </div>
                    </div>
                </Header>
                <Content style={{ margin: '0 16px', paddingTop: '16px', background: 'white' }}>
                    <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        <Row gutter={16}>
                            <Col span={24}>
                                <Board
                                    style={{ backgroundColor: '#ffffff' }}
                                    data={data}
                                    laneStyle={{ backgroundColor: '#040f27', color: 'white' }}
                                    cardStyle={{
                                        backgroundColor: 'white',
                                        border: '1px solid #d9d9d9',
                                        padding: '8px',
                                        borderRadius: '4px'
                                    }}
                                    onCardDelete={function noRefCheck() {
                                        message.error('Card can`t be deleted');
                                        throw new Error('Card deleted');
                                    }}
                                    onCardDragEnd={function noRefCheck() {
                                        console.log('Card dragged');
                                    }}
                                    editable={false}
                                    draggable={false}
                                />
                            </Col>
                        </Row>
                    </div>
                </Content>
            </Layout>

            <PublishTaskModal isVisible={isModalVisible} onOk={(values => {
            })} onCancel={() => {
                setIsModalVisible(false);
            }} />

            <Modal
                width={"800px"}
                title="Update Profile"
                visible={isProfileModalVisible}
                onCancel={() => setIsProfileModalVisible(false)}
                footer={null}
                maskClosable={false}  // 添加这一行
            >
             <MyProfile setIsProfileModalVisible={(flag)=>{setIsProfileModalVisible(false)}}/>
            </Modal>
        </Layout>
    );
};

export default MainPage;